<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="js/axios.min.js"></script>
    <script type="text/javascript" src="js/vue.js"></script>
    <script type="text/javascript" src="js/const.js"></script>
</head>
<body>
<div id="app">
        <ul>
            <li><input type="hidden"  v-model="id"></li>
            <li>name</li>
            <li><input type="text"  v-model="name"></li>
            <li>remark</li>
            <li><textarea rows="3" cols="50" v-model="remark"></textarea> </li>
            <li><button v-on:click="update()">update</li>
        </ul>
</div>
</body>

<script type="text/javascript">
    var config = {
        el:"#app",
        data:{
            goodsId:null,
            id:null,
            name:null,
            remark:null
        },
        methods:{
            selectById:function(){
                var url=serverHost+"selectById?id="+this.goodsId;
                axios.get(url).then(
                    function(res){
                        var goods = res.data;
                        this.vue.id = goods.id;
                        this.vue.name = goods.name;
                        this.vue.remark = goods.remark;
                });
            },
            update:function(){
                var url = serverHost+"doGoodsUpdate";
                var data = {
                    "id":this.goodsId,
                    "name":this.name,
                    "remark":this.remark
                };
                axios.post(url,data).then(
                    function(res){
                        location.href="goods.html";
                });
            }
        },
        mounted:function(){
            this.goodsId = location.search.substr(1).split("=")[1];
			this.selectById();
        }
    };

    var vue = new Vue(config);

</script>
</html>